<template>
  <CustomPageLayout>
    <template #top>
      <LabelSearch label="优质载体资源" :search-str.sync="params.name" />
    </template>

    <template #center>
      <ResourceFilters :checked.sync="params.filters" :resource-name.sync="resourceName" />
    </template>

    <template #bottomLeft>
      <LabelCountSort :count="total">
        <template #sort>
          <ListSortGroup :data-list="sortData" :sort.sync="params.sort" />
        </template>

        <template #viewMode>
          <ViewMode @onChange="(mode) => (currentMode = mode)" />
        </template>
      </LabelCountSort>

      <component :is="currentName" :data-list="dataList" :loading="loading" :mode="currentMode" />
      <!-- <ParkList :data-list="dataList" :loading="loading" /> -->
    </template>

    <template #pagination>
      <Pagination
        :total="total"
        :page-size="params.pageInfo.pageSize"
        :current-page.sync="params.pageInfo.pageNum"
      />
    </template>
  </CustomPageLayout>
</template>

<script lang="ts">
import Vue from 'vue'
// import { parkDataList } from '@/pages/park/mockData'
import CustomPageLayout from '@/components/portal/CustomPageLayout.vue'
import LabelSearch from '@/components/portal/LabelSearch.vue'
import ResourceFilters from '@/components/portal/resource/ResourceFilters.vue'
import LabelCountSort from '@/components/portal/LabelCountSort.vue'
import ListSortGroup from '@/components/portal/ListSortGroup.vue'
import Pagination from '@/components/portal/Pagination.vue'
import LandList from '@/components/portal/resource/LandList.vue'
import ViewMode from '@/components/portal/ViewMode.vue'
import { ActionsType as DictActionsType } from '@/actions/dict'
import { ActionsType as TreeActionsType } from '@/actions/tree'
import {
  getLandPageList,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  getWorkshopPageList,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  getBuildingPageList,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  getDepositoryPageList,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  getShopPageList,
} from '@/api/resource'
export default Vue.extend({
  components: {
    CustomPageLayout,
    LabelSearch,
    ResourceFilters,
    LabelCountSort,
    ListSortGroup,
    Pagination,
    LandList,
    ViewMode,
    WorkshopList: () => import('@/components/portal/resource/WorkshopList.vue'),
    BuildingList: () => import('@/components/portal/resource/BuildingList.vue'),
    DepositoryList: () => import('@/components/portal/resource/DepositoryList.vue'),
    ShopList: () => import('@/components/portal/resource/ShopList.vue'),
  },
  async asyncData({ store }) {
    // await store.dispatch(TreeActionsType.getArea)
    // await store.dispatch(TreeActionsType.getIndustryTag)
    await store.dispatch(DictActionsType.getCodes, [
      'land_type',
      'sell_type',
      'land_price',
      'land_area_range',
      'land_price_range',
      'rent_or_sale',
    ])

    const result = await getLandPageList({
      pageInfo: {
        pageNum: 1,
        pageSize: 12,
      },
    })

    return {
      dataList: result.list,
      total: result.total,
      loading: false,
    }
  },
  data() {
    return {
      currentMode: 'card',
      loading: true,
      total: 0,
      resourceName: 'Land',
      sortData: [
        {
          label: '按面积',
          sort: -1,
          key: 'area',
        },
      ],
      params: {
        pageInfo: {
          pageNum: 1,
          pageSize: 12,
        },
        name: '',
        filters: [],
        sort: {},
      },
      dataList: [],
    }
  },
  head: {
    title: '查资源',
  },
  computed: {
    currentName() {
      return `${this.resourceName}List`
    },
    listMethod() {
      const map = {
        Land: getLandPageList,
        Building: getBuildingPageList,
        Workshop: getWorkshopPageList,
        Depository: getDepositoryPageList,
        Shop: getShopPageList,
      }
      return map[this.resourceName]
    },
  },
  watch: {
    resourceName() {
      this.fetchData()
    },
    'params.name'() {
      this.fetchData()
    },
    'params.filters'() {
      this.fetchData()
    },
    'params.sort'() {
      this.fetchData()
    },
    'params.pageInfo.pageNum'() {
      this.fetchData()
    },
  },
  created() {
    this.$store.dispatch(TreeActionsType.getArea)
  },
  methods: {
    async fetchData() {
      const {
        pageInfo: { pageNum },
        filters,
        name,
        sort,
      } = this.params

      const params = {
        conditions: {},
        sort: {},
        pageInfo: {
          pageNum,
          pageSize: 12,
        },
      }

      const rangKey = ['area', 'price']
      filters.forEach((d) => {
        console.log(d)
        if (rangKey.includes(d.key)) {
          if (!params.conditions.$and) {
            params.conditions.$and = []
          }
          const checked = d.checked[0]
          params.conditions.$and.push({ [`data.${d.key}`]: { $gte: checked.min } })
          if (checked.max) {
            params.conditions.$and.push({ [`data.${d.key}`]: { $lte: checked.max } })
          }
        } else {
          params.conditions[`data.${d.key}`] = d.checked[0].value
        }
      })

      if (name) {
        params.conditions[`data.name`] = { $regex: name }
      }

      if (sort) {
        params.sort[`data.${sort.key}`] = sort.sort
      }

      this.loading = true
      const result = await this.listMethod(params)
      this.dataList = result.list
      this.total = result.total
      this.loading = false
    },
  },
})
</script>
<style lang="scss" scoped></style>
